<template>
  <div>

    <el-form :inline="true" :model="entity" class="demo-form-inline">
      <el-form-item label="用户账号">
        <el-input v-model="entity.userName" placeholder="用户账号"></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱">
        <el-input v-model="entity.email" placeholder="用户邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
      </el-form-item>
    </el-form>

    <el-button @click="toAdd" type="success">添加用户</el-button>
    <el-button @click="createExcel" type="primary">导出Excel</el-button>
    <el-button @click="toExcel" type="danger">导入Excel</el-button>

    <el-dialog title="导入excel" :visible.sync="dialogTableVisible">
      <el-upload
          class="upload-demo"
          drag
          action="http://localhost:8090/auth/readExcel"
          multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>

    <!--添加用户-->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="角色" prop="roleIds">
          <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
            <el-option v-for="r in roleList" v-bind:key="r.roleId" :label="r.roleName" :value="r.roleId">{{r.roleName}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位" prop="postIds">
          <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
            <el-option v-for="p in postList" v-bind:key="p.postId" :label="p.postName" :value="p.postId">{{p.postName}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <el-cascader
              v-model="form.deptId"
              :options="deptList"
              @change="handleChangeDeptId"
              clearable></el-cascader>
        </el-form-item>
        <el-form-item label="用户账号" prop="userName" :label-width="formLabelWidth">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickName" :label-width="formLabelWidth">
          <el-input v-model="form.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber" :label-width="formLabelWidth">
          <el-input v-model="form.phoneNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex" :label-width="formLabelWidth">
          <template>
            <el-radio v-model="form.sex" label="0">男</el-radio>
            <el-radio v-model="form.sex" label="1">女</el-radio>
            <el-radio v-model="form.sex" label="2">未知</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="用户头像" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8090/auth/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-cascader
              v-model="value"
              :options="options"
              @change="handleChangeAddrId"></el-cascader>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="instrUser('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改用户信息-->
    <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible2">
      <el-form :model="user">
        <el-form-item label="用户ID" :label-width="formLabelWidth">
          <el-input v-model="user.userId" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门ID" :label-width="formLabelWidth">
          <el-input v-model="user.deptId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="roleIds" multiple placeholder="请选择角色">
            <el-option v-for="r in roleList" v-bind:key="r.roleId" :label="r.roleName" :value="r.roleId">{{r.roleName}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位">
          <el-select v-model="postIds" multiple placeholder="请选择岗位">
            <el-option v-for="p in postList" v-bind:key="p.postId" :label="p.postName" :value="p.postId">{{p.postName}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户账号" :label-width="formLabelWidth">
          <el-input v-model="user.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" :label-width="formLabelWidth">
          <el-input v-model="user.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" :label-width="formLabelWidth">
          <el-input v-model="user.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="user.phoneNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <template>
            <el-radio v-model="user.sex" label="0">男</el-radio>
            <el-radio v-model="user.sex" label="1">女</el-radio>
            <el-radio v-model="user.sex" label="2">未知</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <template>
            <el-radio v-model="user.status" label="0">正常</el-radio>
            <el-radio v-model="user.status" label="1">停用</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-cascader
              v-model="value"
              :options="options"
              @change="handleChangeAddrId"></el-cascader>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <!--列表展示-->
    <template>
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="userId"
            label="用户ID"
            width="120">
        </el-table-column>
        <el-table-column
            prop="deptName"
            label="部门名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="roleName"
            label="角色名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="postName"
            label="岗位名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="userName"
            label="用户账号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="nickName"
            label="用户昵称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="userType"
            label="用户类型"
            width="120">
          <template v-slot="u">
            {{u.row.userType=='00'?'系统用户':'其他用户'}}
          </template>
        </el-table-column>
        <el-table-column
            prop="email"
            label="用户邮箱"
            width="120">
        </el-table-column>
        <el-table-column
            prop="phoneNumber"
            label="手机号码"
            width="120">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="150">
          <template v-slot="s">
            <div v-if="s.row.sex==0" >男</div>
            <div v-if="s.row.sex==1" >女</div>
            <div v-if="s.row.sex==2" >未知</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="avatar"
            label="用户头像"
            width="150">
          <template v-slot="s">
            <el-image :src="s.row.avatar" style="height: 50px;width: 50px;"></el-image>
          </template>
        </el-table-column>
        <el-table-column
            prop="status"
            label="用户状态"
            width="120">
          <template v-slot="s">
            {{s.row.status==0?'正常':'停用'}}
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="150">
          <template slot-scope="scope">
            <el-button @click="toUpdate(scope.row)" type="text" size="small">修改信息</el-button>
            <el-button @click="del(scope.row.userId)" type="text" size="small">删除用户</el-button>
            <el-button @click="delFlag(scope.row.userId)" type="text" size="small">逻辑删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!--分页-->
    <el-pagination
        @current-change="goPage"
        :page-size="5"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>

  </div>

</template>

<script>
export default {
  name: "UserView",
  data() {
    return {
      rules: {
        roleIds: [
          {required: true, message: '请选择角色', trigger: 'blur'},
        ],
        postIds: [
          {required: true, message: '请选择岗位', trigger: 'blur'}
        ],
        deptId: [
          {required: true, message: '请选择部门', trigger: 'change'}
        ],
        userName: [
          {required: true, message: '请输入用户账号', trigger: 'blur'}
        ],
        nickName: [
          {required: true, message: '请选择岗位', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请选择岗位', trigger: 'blur'}
        ],
        phoneNumber: [
          {required: true, message: '请选择岗位', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'blur'}
        ]
      },
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      dialogFormVisible2: false,
      form: {},
      imageUrl: '',
      user: {},
      pageNum: 1,
      total: 0,
      options:[],
      entity:{},
      roleList:[],
      postList:[],
      deptList:[],
      dialogTableVisible:false,
      value:[],
      roleIds:[],
      postIds:[]
    }
  }, methods: {
    list() {
      this.axios.post("http://localhost:8090/auth/selectAll?pageNum=" + this.pageNum,this.entity).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    toAdd() {
      this.dialogFormVisible = true;
      this.form={};
      this.init();
    },
    //添加/非空校验
    instrUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form)
          this.axios.post("http://localhost:8090/auth/instr", this.form).then(res => {
            console.log(res.data)
            if (res.data.code == 200) {
              this.$message.success("添加成功");
              this.dialogFormVisible = false;
              this.list();
            } else {
              this.$message.error("添加失败");
              this.dialogFormVisible = false;
            }
          })
          console.log('error submit!!');
          return false;
        }
      });
    },
    //头像上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.avatar = res;
    },
    //头像上传校验
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //删除
    del(id) {
      this.axios.post("http://localhost:8090/auth/delete?id=" + id).then(res => {
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.list();
        } else {
          this.$message.error("删除失败");
        }
      })
    },
    //弹出修改对话框
    toUpdate(row) {
      this.value=[];
      this.dialogFormVisible2 = true;
      this.user = row;
      this.value.push(this.user.provinceId+'',this.user.cityId+'',this.user.countyId+'');
      this.axios.post("http://localhost:8090/auth/getRoleIds?userId="+this.user.userId).then(res=>{
        this.roleIds=res.data;
      })
      this.axios.post("http://localhost:8090/auth/getPostIds?userId="+this.user.userId).then(res=>{
        this.postIds=res.data;
      })
      console.log(this.roleIds)
      this.init();
    },
    //修改
    update() {
      this.axios.post("http://localhost:8090/auth/updateById", this.user).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.dialogFormVisible2 = false;
          this.list();
        } else {
          this.$message.error("修改失败");
        }
      })
    },
    //分页
    goPage(page) {
      this.pageNum = page;
      this.list();
    },
    //获取添加时省市区三级联动下拉框的值
    handleChangeAddrId(value){
      this.form.provinceId = value[0];
      this.form.cityId = value[1];
      this.form.countyId = value[2];
    },
    //获取部门的值
    handleChangeDeptId(value){
      let vl = value[value.length-1];
      this.form.deptId=vl;
    },
    //初始化添加时数据
    init(){
      this.axios.post("http://localhost:8090/auth/getAreaAll").then(res=>{
        this.options=res.data;
      })
      this.axios.post("http://localhost:8090/role/roleList").then(res=>{
        this.roleList=res.data;
      })
      this.axios.post("http://localhost:8090/post/postList").then(res=>{
        this.postList=res.data;
      })
      this.axios.post("http://localhost:8090/dept/deptList").then(res=>{
        this.deptList=res.data;
      })
    },
    //生成excel
    createExcel(){
      location.href="http://localhost:8090/auth/createExcel";
    },
    //逻辑删除
    delFlag(id){
      this.axios.post("http://localhost:8090/auth/delFlag?id=" + id).then(res => {
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.list();
        } else {
          this.$message.error("删除失败");
        }
      })
    },
    toExcel(){
      this.dialogTableVisible=true;
    }
  }, created() {
    this.list();
    this.init();
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>